<template>
  <view class="online-users-container">
    <view v-for="(user, index) in onlineUsers" :key="index" class="user-item">
     <uni-list-chat
      :title="user.userName"
      :avatar="getImageUrl(user.avatar)"
      :clickable="true"
      @click="toChat(user)"
      />
    </view>
  </view>
  <tabberVue></tabberVue>
</template>
<script setup>
import tabberVue from "@/components/tabber/tabber.vue";
import { signalR } from "@/utils/signalr.js";
import { ref, onMounted } from "vue";
import { onLoad, onUnload, onShow } from "@dcloudio/uni-app";

//
import { CurrentChatUserInfoStore } from "@/store/currentChatUserInfo";
const currentChatUserInfoStore = CurrentChatUserInfoStore();

const onlineUsers = ref([]);

const GetOnlineUsers = () => {
  console.log(signalR);
  console.log("获取在线用户列表");
  signalR.off('OnlineUserList');
  signalR.on("OnlineUserList", (users) => {
    console.log("在线用户列表更新:", users);
    onlineUsers.value = users.userList;
  });
};

const handleImageError = (event) => {
  event.target.src = '/static/default-avatar.png'; // 默认头像路径
};

const toChat = (user) => {
  currentChatUserInfoStore.setCurrentChatUserInfo(user);
  uni.navigateTo({
    url: '/pages/business/onLine/chat/chat?userId=' + user.userId,
    success: function (res) {
      console.log('跳转成功');
    },
    fail: function () {
      console.log('跳转失败');
    }
  });
};

onShow(() => {
  GetOnlineUsers();
});
</script>
<style>
.online-users-container {
  padding: 20px;
  background-color: #f9f9f9;
}

.user-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 15px;
  transition: transform 0.2s;
}

.user-item:hover {
  transform: translateY(-5px);
}

.user-info {
  display: flex;
  align-items: center;
}

.user-avatar {
  border-radius: 50%;
  transition: transform 0.2s;
}

.user-avatar:hover {
  transform: scale(1.05);
}

.user-details {
  margin-left: 15px;
}

.user-name {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.user-status {
  font-size: 14px;
  margin-top: 5px;
  font-weight: bold;
}

.user-status.online {
  color: #4caf50;
}
</style>